import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { List } from 'antd';

import menuList from '../menu';
import './style.less';
import view_bg from '../../img/6.png'
import {setTitle} from "../../common/PublicComponent";
import {Form} from "antd/lib/index";

@setTitle('界面管理-学院简介','API_GET_VIEW_MODELS')
export default class View extends Component {
    state = {
        index: '',
        subIndex: '',
        screenHeight: 0,
    }

    componentWillMount() {
        const {index, subIndex} = this.props.location.state;
        if (index && subIndex) {
            this.setState({index, subIndex});
        }
        this.setState({
            screenHeight: document.documentElement.clientHeight - 60,
        }, () => {
            window.onresize = () => {
                this.setState({
                    screenHeight: document.documentElement.clientHeight - 60,
                });
            };
        });
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.location.state.index !== this.state.index || nextProps.location.state.subIndex !== this.state.subIndex) {
            this.setState({
                index: nextProps.location.state.index,
                subIndex: nextProps.location.state.subIndex,
            });
        }
    }

    render() {
        const {index, subIndex, screenHeight} = this.state;
        return (
            <div className="view page" style={{
                height: 'auto',
                minHeight: `${screenHeight}px`,
                background: `rgb(244, 228, 200) url(${view_bg}) no-repeat 0 0`,
                backgroundSize: '100% auto',
                paddingTop: '150px',
                paddingBottom: '50px',
            }}>
                <div className="view-leftMenu">
                    <div className="leftMenu">
                        <List
                            header={<div>{menuList[index].title}</div>}
                            bordered
                            dataSource={menuList[index].children}
                            renderItem={(item, i) => (<List.Item>
                                <Link to={item.path} className={i === Number(subIndex) ? 'leftMenu-link leftMenu-currentItem' : 'leftMenu-link'}>
                                    {item.name}
                                </Link>
                            </List.Item>)}
                        />
                    </div>
                    <div className="leftMenu">
                         <List
                            header="专题网站"
                            bordered
                        >
                            <List.Item>中华思想文化术语传播网 »</List.Item>
                            <List.Item>中华思想文化术语传播网 »</List.Item>
                            <List.Item>中华思想文化术语传播网 »</List.Item>
                        </List>
                    </div>
                </div>
                <div className="view-rightCon">
                    <div className="rightCon-breach">
                        <span>首页</span>／<span>{menuList[index].title}</span>／<span style={{color: 'rgba(255, 255, 255, 0.75)'}}>{menuList[index].children[subIndex].name}</span>
                    </div>
                    <div className="rightCon-title">
                        <h2>{menuList[index].children[subIndex].name}</h2>
                    </div>
                    <div className="rightCon-con">
                        {menuList[index].children[subIndex].component}
                    </div>
                </div>
            </div>
        );
    }
}